//分类

function changeLogin() {
  let login = JSON.parse(localStorage.getItem("login") || "[]");
  let iflogin = document.querySelector(".iflogin");
  if (login != "") {
    iflogin.innerHTML = `用户<a href='#'>${login.username}</a>`;
    iflogin.nextSibling.innerHTML = `<a href='./cart.html'>我的购物车</a>`;
  } else {
    iflogin.innerHTML = `<a href="./login.html">登录</a>`;
    iflogin.nextSibling.innerHTML = `<a href="./register.html">请注册</a>`;
  }
}
let navList = document.querySelector(".navP").querySelectorAll("a");
for (let i = 0; i < navList.length; i++) {
  navList[i].setAttribute("data-id", i);
  navList[i].addEventListener("click", function () {
    let index = this.getAttribute("data-id");
    getNavList(index);
  });
}

function getNavList(id) {
  axios({
    method: "get",
    url: "http://api.yuguoxy.com/api/shop/list/category",
    params: {
      categoryId: id,
    },
  }).then((response) => {
    let data = response.data;
    let { resultCode, resultInfo } = data;
    if (resultCode == 1) {
      let navList = resultInfo.list;
      localStorage.setItem("navList", JSON.stringify(navList));
      location.href = "../pages/navpage.html";
    }
  });
}

changeLogin();
//获取数据
let goodInfo;
function getDetail() {
  let url = location.search; //?id=50
  url = url.substring(1);
  let id = url.split("=")[1];
  axios({
    method: "get",
    url: "http://api.yuguoxy.com/api/shop/find",
    params: {
      id,
    },
  }).then((response) => {
    let data = response.data;
    let { resultCode, resultInfo } = data;
    if (resultCode == 1) {
      goodInfo = resultInfo;
      console.log(goodInfo);
      getShow(goodInfo);
    }
  });
}

let show = document.querySelector(".show");
//放大盒子
let fanda = document.querySelector(".fanda");
let showul = document.querySelector(".s_show").querySelector("ul");
let showimgbox = show.querySelector(".img");
let mask = document.querySelector(".mask");
let fandaimg = document.querySelector(".fandaimg");
let title = document.querySelector(".right").querySelector("h1");
let price = document.querySelector(".pro-price").querySelector("span");
function getShow(goodInfo) {
  console.log("渲染");
  showimgbox.innerHTML = ` <img src=${goodInfo.picture} class='showimg'>`;
  fandaimg.setAttribute('src',`${goodInfo.picture}`)

  let list = goodInfo.list;
  let str = list.reduce((pre, cur) => {
    return pre += `
        <li class='ulli'>
         <img src=${cur}  alt="" class='smallimg'>
        </li>
        `
  }, "");
  showul.innerHTML = str;

  title.innerHTML = `${goodInfo.shop}`;

  price.innerHTML = `${goodInfo.price}`;
}

getDetail();

show.addEventListener("mouseenter", function () {
 

  mask.style.display='block'
  fanda.style.display='block'

   //初始化放大镜大小
   let w=fanda.offsetWidth*show.clientWidth/mask.clientWidth;
   fandaimg.style.width=w+'px'
   fandaimg.style.height=w+'px'
 
 
});

show.addEventListener('mousemove',function(e){
  
  
  var e=e||window.Event;
  let x=e.offsetX-mask.clientWidth/2
  let y=e.offsetY-mask.clientHeight/2
  
  if(x<0){
    x=0
  }
  if(y<0){
    y=0
  }
  if(x>show.clientWidth-mask.clientWidth){
    x=show.clientWidth-mask.clientWidth
  }
  if(y>show.clientHeight-mask.clientHeight){
    y=show.clientHeight-mask.clientHeight
  }
  
  mask.style.top=y+'px'
  mask.style.left=x+'px'

  let movex=x*fanda.clientWidth/mask.clientHeight
  let movey=y*fanda.clientHeight/mask.clientHeight
  
  fandaimg.style.top=-movey+'px'
  fandaimg.style.left=-movex+'px'

})



show.addEventListener('mouseleave',function(){
  mask.style.display='none'
  fanda.style.display='none'
})

 
showul.onclick=function(e){
  var e=e||window.Event;
  
  if(e.target.nodeName!='IMG'){
    return false;
  }else{
    
    let src=e.target.getAttribute('src')
    showimgbox.innerHTML = ` <img src=${src} class='showimg'>`;
   
    fandaimg.setAttribute('src',`${src}`)
  
  }
  
  }
  








 //离开图片恢复原来图片
 let left = document.querySelector(".left");
 left.addEventListener("mouseleave", function () {
   showimgbox.innerHTML = ` <img src=${goodInfo.picture} class='showimg'>`;
   fandaimg.setAttribute('src',`${goodInfo.picture}`)
 });





//添加购物车
let butt = document.querySelector(".butt");
let goodlist = JSON.parse(localStorage.getItem("goodlist") || "[]");

butt.addEventListener("click", function () {
  let login = JSON.parse(localStorage.getItem("login") || "[]");
  if (login == "") {
    alert("清欠登录");
    location.href = "../pages/login.html";
    return false;
  }

  //获取id
  let url = location.search; //?id=50
  url = url.substring(1);
  let id = url.split("=")[1];

  let showimg = showimgbox.querySelector(".showimg");
  let goodurl = showimg.getAttribute("src");

  let good = {
    id: id,
    name: title.innerText,
    price: price.innerText,
    num: 1,
    state: false,
    allprice: price.innerText,
    src: goodurl,
  };

  let flag = goodlist.some((item) => {
    return item.id == id;
  });

  if (!flag) {
    goodlist.push(good);
  } else {
    goodlist.forEach((item, index) => {
      if (item.id == id) {
        item.num++;
        alert('添加成功')
      }
    });
  }
  localStorage.setItem("goodlist", JSON.stringify(goodlist));
  console.log(flag);
});


//查看购物车
let gocart=document.querySelector('.gocart')
gocart.onclick=function(){
  location.href='../pages/cart.html'
}







let exit = document.querySelector(".exit");
exit.onclick = function () {
  if (confirm("退出登录?")) {
    localStorage.removeItem("login");
    location.reload();
  }
};

//搜索
let svg=document.querySelector('.svg')
svg.onclick=function(){
    let search=document.querySelector('.search')
    let val=search.value;
    if(val==''){
        alert('请输入搜索内容')
    }else{
        location.href=`../pages/find.html?keyword=${val}`
       
    }
   
    
}